<template>
  <div class="chat-container">
    <div v-for="(msg, index) in props.history" ref="messageRefs" :key="msg.message.slice(0,10)" :class="`msg-container ${msg.role}`">
      <div class="text">
        {{ msg.message }}
        <span class="blink" v-if="(index + 1 === props.history.length)&&(props.isGenerating)">_</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, ref, watch} from 'vue'

const props = defineProps(['history', 'isGenerating'])
const messageRefs = ref(null)
watch(()=>props.history,()=>{
  if(!!props.history.length){
    nextTick(()=>{
      messageRefs.value[props.history.length-1].scrollIntoView();
    })
  }
},{ deep:true })
</script>

<style lang="scss" scoped>
.chat-container{
  width: calc(100% - 1em);
  padding: 0 .5em;
  .msg-container{
    font-size: .9em;
    width: 100%;
    display: flex;
    text-align: left;
    margin: 1em 0;
    .text{
      white-space: pre-line;
      padding: .2em .5em;
      border: 1px solid #d5d5d5;
      border-radius: .3em;
      max-width: 85%;
      word-break: break-all;
    }
    &.me{
      justify-content: right;
    }
    &.ai{
      justify-content: left;
    }
  }
}
</style>
